<template>
	<div id="layout">
	  <a-layout style="height: 100vh">
		<a-layout-sider width="160px">
		  <div class="layout_left">
			<div ref="user_bottom">
			  <!-- <a-avatar :size="48" class="user_avatar" @click="bottomChange">
				<template #icon><UserOutlined /></template>
			  </a-avatar> -->
			  <img class="user_avatar" src="/assets/image/background-6556413_1920.jpg" @click="bottomChange" />
			  <ul :class="['user_bottom', bottomIsShow ? 'bottom_show' : '']">
				<li>
				  <!-- <div class="user_bottom_avatar">avatar</div> -->
				  <img class="user_avatar2" src="/assets/image/background-6556413_1920.jpg" />
				  <div class="user_bottom_name">
					<span>{{ username }}</span>
				  </div>
				</li>
				<!-- <li class="center" @click="toSetting('/setting')">设置</li> -->
  
				<li class="center" @click="exit()">退出登录</li>
			  </ul>
			</div>
			<div class="layout_menu">
			  <a-menu v-model:selectedKeys="selectedKeys" style="width: 100%" mode="inline" theme="dark"
				@click="handleClick">
				<a-menu-item key="/spider">
				  <template #icon>
					<form-outlined class="icon_class" />
				  </template>
				  爬虫功能 
				</a-menu-item><a-badge :count="taskNumber" :overflow-count="9" :offset="[-18, 24]">
				<a-menu-item key="/good">
				<template #icon>
					<profile-outlined class="icon_class" />
				</template>
				商品列表
				</a-menu-item></a-badge>
				<!-- <a-menu-item key="/visualize">
				<template #icon>
					<profile-outlined class="icon_class" />
				</template>
				可视化
				</a-menu-item> -->
				<a-sub-menu title="可视化" mode="inline">
					<template #icon>
					<profile-outlined class="icon_class" />
				</template>
					<a-menu-item key="/vsnack">零食</a-menu-item>
					<a-menu-item key="/vshoe">鞋子</a-menu-item>
					<a-menu-item key="/vphone">手机</a-menu-item>
					<a-menu-item key="/vswear">衣服</a-menu-item>
					<a-menu-item key="/vcomputer">电脑</a-menu-item>
					<!-- <a-menu-item key="/vtgoods">所有商品</a-menu-item> -->
				</a-sub-menu>
				<a-menu-item key="/total">
					<template #icon>
					<profile-outlined class="icon_class" />
				</template>
				数据统计
				</a-menu-item>
				<a-menu-item key="/login">
				  <template #icon>
					<home-outlined class="icon_class" />
				  </template>
				  退出登录
				</a-menu-item>
				<a-menu-item key="/user" v-if="isShow">
				  <template #icon>
					<user-outlined class="icon_class" />
				  </template>
				  用户管理
				</a-menu-item>
			  </a-menu>
			  <a-menu v-model:selectedKeys="selectedKeys" style="width: 100%; margin-bottom: 12px" mode="inline"
				theme="dark" @click="handleClick">
				<!-- <a-menu-item key="/database" v-if="!isShow">
				  <template #icon>
					<cloud-sync-outlined class="icon_class" />
				  </template>
				  数据库
				</a-menu-item> -->
			  </a-menu>
			</div>
		  </div>
		</a-layout-sider>
		<a-layout>
		  <!-- <a-layout-header> </a-layout-header> -->
		  <a-layout-content class="layout_content">
			<!-- <div class="page_header">
			</div> -->
			<div class="page_content">
				<span style="font-size: 20px; color: red; font-family: 'Microsoft YaHei', sans-serif;">用户:{{ username }},你好，欢迎使用拼多多分析系统！
				</span>
			</div>
		  </a-layout-content>
		</a-layout>
	  </a-layout>
	</div>
  </template>
  <script setup lang="ts">
  import { ref, onMounted, watchEffect, computed, onUnmounted } from "vue";
  import {
	HomeOutlined,
	FormOutlined,
	ProfileOutlined,
	UserOutlined,
	CloudSyncOutlined,
  } from "@ant-design/icons-vue";
  import Breadcrumb from "@/components/Breadcrumb.vue";
  import { message, type MenuProps } from "ant-design-vue";
  import { useRouter } from "vue-router";
  import { routes } from "@/router/index";
  import {UserDetail} from "@/api/userdetail"
  import PageTitle from "@/components/PageTitle.vue";
  import store from "@/stores";
  const router = useRouter();
  const user_bottom = ref();
  const bottomIsShow = ref<Boolean>(false);
  const selectedKeys = ref(["home"]);
  const userName = ref("");
  const role = ref("");
  const isShow = ref(false);
  const taskNumber = ref(0);
  const timer = ref<any>(null);
  const handleClick: MenuProps["onClick"] = (e) => {
	router.push({ path: e.key.toString() });
  };
  const toSetting = (path: string) => {
	routerPush(path);
	bottomIsShow.value = false;
  };
  const routerPush = (path: string) => {
	router.push({ path: path });
	selectedKeys.value = [path];
  };
  const bottomChange = () => {
	bottomIsShow.value = !bottomIsShow.value;
  };
//   let username:string;
//   UserDetail()
//   .then(data => {
//     username = data.data
//   })
//   .catch(error => {
//     console.error('获取用户详细信息失败:', error);
//   });
const username = ref<string>("");

const fetchUserData = async () => {
  try {
    const data = await UserDetail();
    username.value = data.data;
  } catch (error) {
    console.error('获取用户详细信息失败:', error);
  }
};

onMounted(() => {
  fetchUserData();
});

  const exit = () => {
	store.dispatch("logout");
	localStorage.removeItem("token");
	router.push({ path: "/login" });
  };
  </script>
  <style lang="scss" scoped>
  @import "./home.scss";
  </style>
  